<template>
  <page-box>
    <div class="ui-search-box" slot="search-form">
      <el-form class="ui-search-form" label-width="120px" :model="params" ref="form">
        <el-form-item label="选择月份" prop="dsMonth">
          <el-date-picker
            v-model="params.dsMonth"
            type="monthrange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            size="small">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="每页数据">
          <el-select size="mini" class="ui-item-reset"  v-model="params.pageSize">
            <el-option label="5" :value="5"></el-option>
            <el-option label="10" :value="10"></el-option>
            <el-option label="20" :value="20"></el-option>
          </el-select>
        </el-form-item>
      </el-form>


      <el-dialog :visible.sync="chartFlag1" width="800px" @opened="getChart1">
        <div style="width: 750px;height:400px;" id="echart"></div>
      </el-dialog>
      <el-dialog :visible.sync="chartFlag2" width="750px" @opened="getChart2">
        <el-form :model="chartItem2">
          <el-form-item prop="dsMonth">
            <el-date-picker
              v-model="chartItem2.dsMonth"
              type="monthrange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              size="small"
              @change="getChartList2">
            </el-date-picker>
          </el-form-item>
          <div style="width: 700px;height:400px;" id="echart2"></div>
        </el-form>
      </el-dialog>
      <el-dialog :visible.sync="chartFlag3" width="750px" @opened="getChart3">
        <el-form class="ui-search-form" label-width="120px" :model="chartItem3">
          <el-form-item label="月份" prop="dsMonth">
            <el-date-picker
              v-model="chartItem3.dsMonth"
              type="monthrange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              size="small"
              @change="getChartList3">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="宿舍楼" prop="buildingNo">
            <el-select v-model="chartItem3.buildingNo" placeholder="宿舍号" size="small" @change="getChartList3">
              <el-option
                v-for="item in buildingNoList"
                :key="item.buildingNo"
                :label="item.buildingNo"
                :value="item.buildingNo">
              </el-option>
            </el-select>
          </el-form-item>
          <div style="width: 700px;height:400px;" id="echart3"></div>
        </el-form>
      </el-dialog>
      <el-dialog :visible.sync="chartTotalFlag" width="30%" title="选择统计图类型">
        <el-select v-model="value" placeholder="请选择" size="small" @change="chartKinds">
          <el-option
            v-for="item in chartKindOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-dialog>
      <div class="ui-search-btus">
        <el-button type="primary" size="mini" @click="chartTotalFlag=true">统计图</el-button>
        <el-button type="primary" size="mini" @click="getData">搜索</el-button>
        <el-button  size="mini" @click="resetForm('form')">重置</el-button>
      </div>
    </div>
    <div class="ui-list ui-box" slot="list-box">
      <div class="box-header ui-list-header">
        <div>网费列表</div>
        <div>
<!--          <el-button type="primary" size="mini" @click="exportDsExcel">导出</el-button>-->
<!--          <el-button type="primary" size="mini" @click="open">新增</el-button>-->
        </div>
      </div>
      <el-table :data="dataList" @selection-change="handleSelectionChange" :cell-style="cellStyle"
                :header-cell-style="rowClass" v-loading="tabLoading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="dsMonth" label="月份"></el-table-column>
        <el-table-column prop="dsInternetBill" label="网费(元)"></el-table-column>
        <el-table-column prop="dsInternetBillDetail" label="网费详情"></el-table-column>
        <el-table-column prop="buildingNo" label="宿舍楼"></el-table-column>
        <el-table-column prop="dorNo" label="宿舍号"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status===1"></el-button>
            <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="openEdit(scope.row)">修改</el-button>
<!--            <el-button size="mini" type="danger" @click="deleteItem(scope.row)">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="ui-pagination"
        @current-change="changPageNum"
        layout="total, prev, pager, next"
        :current-page="this.params.pageNum"
        :page-size="this.params.pageSize"
        :total="total">
      </el-pagination>
      <edit-item v-bind:internetBillItem.sync='internetBillItem' @submit="editItem" ref="editItem"></edit-item>
    </div>
  </page-box>
</template>
<script>
  import pageBox from '@/components/pageBox'
  import editItem from '@/components/dormitoryService/internetBill/editItem.vue'


  export default {
    name: 'internetBillList',
    components: {
      pageBox, editItem
    },
    data() {
      return {
        dataList: [],
        exportList: [],
        params: {
          dsId:'',
          dsMonth:'',
          pageNum: 1,
          pageSize: 10,
          startTime: '',
          endTime: '',
        },
        total: 0,
        tabLoading: false,
        internetBillItem:{
          dsId:'',
          dsMonth: '',
          dsInternetBill: '',
          dsInternetBillDetail:'',
          buildingNo:'',
          dorNo:'',
          status:''
        },
        buildingNoList: [],
        chartTotalFlag:false,
        chartFlag1: false,
        chartFlag2: false,
        chartFlag3: false,
        option_chart: {},
        option_chart2: {},
        option_chart3: {},
        chartList: [],
        chartList2: [],
        chartList3: [],
        chartList4: [],
        chartItem2: {
          type: 2,
          startTime: '',
          endTime: '',
          dsMonth: ['2020-01-01','2020-01-01'],
        },
        chartItem3: {
          type: 3,
          startTime: '',
          endTime: '',
          dsMonth: ['2020-01-01','2020-01-01'],
          buildingNo: 1
        },
        chartKindOptions:[
          {
            label:'2020各月份全部宿舍总网费',
            value:1
          },{
            label:'某月份各宿舍楼总网费',
            value:2
          },{
            label:'某月份某宿舍楼各宿舍网费',
            value:3
          }
        ],
        value: ''
      }
    },
    created() {
      this.getData()
      this.getBuildingNo()

    },
    methods: {
      chartKinds(value){
        if (value===1){
          this.chartFlag1 = true;
        } else if (value===2){
          this.chartFlag2 = true;
        } else if (value===3){
          this.chartFlag3 = true;
        }
      },
      getChart1() {
        this.chartFlag1 = true;
        this.getChartList1()
      },
      getChart2() {
        this.getChartList2()
        this.chartFlag2 = true;
      },
      getChart3() {
        this.getChartList3()
        this.chartFlag3 = true;
      },
      getChartList1() {
        post('/pms_api/dormitoryService/chart', {'type': 1}).then(res => {
          // this.chartList = res.data
          this.chartList = []
          for (let i in res.data) {
            this.chartList.push(res.data[i].totalInternet)
          }
          this.option_chart = {
            color: ['#3398DB'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter:function (params) {
                return params[0].name+"<br>"+params[0].seriesName+":"+params[0].data+"元"
              }
            },
            title: {
              text: '2020各月份全部宿舍总网费',
            },
            xAxis: {
              name:'月份',
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            },
            legend: {
              data: ['网费']
            },
            toolbox: {
              show: true,
              feature: {
                saveAsImage: {show: true},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
              }
            },
            yAxis: {
              type: 'value',
              name:'网费',
              axisLabel: {
                formatter: '{value} 元'
              }
            },
            calculable: true,
            series: [{
              data: this.chartList,
              type: 'bar',
              name: '网费',
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            }]
          }
          let chart = this.$echarts.init(document.querySelector('#echart'))
          chart.setOption(this.option_chart)
          this.tabLoading = false;
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      getChartList2() {
        this.chartItem2.startTime = this.chartItem2.dsMonth[0]
        this.chartItem2.endTime = this.chartItem2.dsMonth[1]
        post('/pms_api/dormitoryService/chart', this.chartItem2).then(res => {
          this.chartList2 = []
          let startYear = new Date(this.chartItem2.startTime).getFullYear();
          let startMonth = new Date(this.chartItem2.startTime).getMonth() + 1;
          let startTime = startYear + '-' + startMonth
          let endYear = new Date(this.chartItem2.endTime).getFullYear();
          let endMonth = new Date(this.chartItem2.endTime).getMonth() + 1;
          let endTime = endYear + '-' + endMonth
          for (let i in res.data) {
            this.chartList2.push(res.data[i].totalInternet)
          }
          this.option_chart2 = {
            color: ['#3398DB'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter:function (params) {
                return params[0].name+"<br>"+params[0].seriesName+":"+params[0].data+"元"
              }
            },
            title: {
              text: startTime + '至' + endTime + '各宿舍楼总网费',
            },
            legend: {
              data: ['网费']
            },
            xAxis: {
              name:"宿舍楼",
              type: 'category',
              data: ['1栋', '2栋', '3栋', '4栋', '5栋', '6栋', '7栋'],
            },
            toolbox: {
              show: true,
              feature: {
                saveAsImage: {show: true},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
              }
            },
            yAxis: {
              type: 'value',
              name:'网费',
              axisLabel: {
                formatter: '{value} 元'
              }
            },
            calculable: true,
            series: [{
              data: this.chartList2,
              type: 'bar',
              name: '网费',
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            }]
          }
          let chart = this.$echarts.init(document.querySelector('#echart2'))
          chart.setOption(this.option_chart2)
          this.tabLoading = false;
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      getChartList3() {
        this.chartItem3.startTime = this.chartItem3.dsMonth[0]
        this.chartItem3.endTime = this.chartItem3.dsMonth[1]
        post('/pms_api/dormitoryService/chart', this.chartItem3).then(res => {
          this.chartList3 = []
          this.chartList4 = []
          let startYear = new Date(this.chartItem3.startTime).getFullYear();
          let startMonth = new Date(this.chartItem3.startTime).getMonth() + 1;
          let startTime = startYear + '-' + startMonth
          let endYear = new Date(this.chartItem3.endTime).getFullYear();
          let endMonth = new Date(this.chartItem3.endTime).getMonth() + 1;
          let endTime = endYear + '-' + endMonth
          for (let i in res.data) {
            this.chartList3.push(res.data[i].totalInternet)
            this.chartList4.push(res.data[i].dorNo)
          }
          this.option_chart3 = {
            color: ['#3398DB'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter:function (params) {
                return params[0].name+"<br>"+params[0].seriesName+":"+params[0].data+"元"
              }
            },
            title: {
              text: startTime + '至' + endTime + '   ' + this.chartItem3.buildingNo + '栋各宿舍网费',
            },
            xAxis: {
              name:"宿舍号",
              type: 'category',
              data: this.chartList4,
            },
            legend: {
              data: ['网费']
            },
            toolbox: {
              show: true,
              feature: {
                saveAsImage: {show: true},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
              }
            },
            yAxis: {
              type: 'value',
              name:'网费',
              axisLabel: {
                formatter: '{value} 元'
              }
            },
            calculable: true,
            series: [{
              data: this.chartList3,
              type: 'bar',
              name: '网费',
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            }]
          }
          let chart = this.$echarts.init(document.querySelector('#echart3'))
          chart.setOption(this.option_chart3)
          this.tabLoading = false;
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      getBuildingNo() {
        post('/pms_api/dormitory/list', {'type': 1}).then(res => {
          this.buildingNoList = res.data
          this.tabLoading = false;
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },


      editItem() {
        // this.tabLoading = true;
        post('/pms_api/dormitoryService/edit', this.internetBillItem).then(res => {
          this.$refs.editItem.editDialogVisible = false;
          console.log('res', res);
          this.getData();
        }).catch(err => {
          console.log(err)
          this.tabLoading = false
        })
        this.$refs.editDor.addDialogVisible = false;
      },
      openEdit(item) {
        this.getDormitoryService(item);
        this.$refs.editItem.openWindow('网费表单', this.internetBillItem);
      },
      changPageNum(val) {
        this.params.pageNum = val
        this.getData()
      },
      getDormitoryService(item) {
        post(`/pms_api/dormitoryService/detail`, {'dsId': item.dsId}).then(res => {
          this.internetBillItem = res.data[0]
        }).catch(err => {
          console.log(err)
        })
      },
      getData() {
        if (this.params.dsMonth != null) {
          this.params.startTime = this.params.dsMonth[0]
          this.params.endTime = this.params.dsMonth[1]
          // this.params.dsMonth = ""
        }
        post('/pms_api/dormitoryService/list', this.params).then(res => {
          this.dataList = res.data
          this.total = res.totalPages
          console.log(res.data)
          this.tabLoading = false
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      checkDetail(item) {
        this.$router.push({
          path: '/dormitoryServiceDetail',
          query: {
            dsId: item.dsId
          }
        })
      },
      deleteItem(item) {
        post('/pms_api/dormitoryService/delete', {'dsId': item.dsId}).then(res => {
          this.getData()
        }).catch(err => {
          console.log(err)
          this.tabLoading = false
        })
      },
      handleSelectionChange(val) {
        this.exportDsList = val
      },
      exportDsExcel() {
        if (this.exportDsList.length > 0) {
          const tHeader = ['宿舍服务号', '水费', '网费', '网费', '宿舍卫生情况','月份','宿舍楼', '宿舍号','状态'];
          const filterVal = ['dsId', 'dsWaterBill', 'dsInternetBill', 'dsInternetBill', 'dsDorHygiene', 'dsMonth','buildingNo', 'dorNo', 'status'];
          const list = this.exportDsList;
          this.$getGlobal.exportFun('报修详情', tHeader, filterVal, list);
        } else {
          this.$message.error('请先选择需要导出的列表项');
        }
      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.getData()
      },
    }
  }
</script>


